import { View, Text, Image, Input, Button } from "@tarojs/components";
import Taro from "@tarojs/taro";
import { useState } from "react";
import { AtInput } from "taro-ui";
import { AtMessage } from "taro-ui";
import "./index.scss";
import {
  register as Rl,
  login as ll,
  getUserInfo
} from "../../api/login/index";
//校验登录名：只能输入5-20个以字母开头、可带数字、“_”、“.”的字串
function isRegisterUserName(s) {
  var patrn = /^[a-zA-Z]{1}([a-zA-Z0-9]|[._]){4,19}$/;
  if (!patrn.exec(s)) return false;
  return true;
}

//校验密码：只能输入6-20个字母、数字、下划线
function isPasswd(s) {
  var patrn = /^(\w){6,20}$/;
  if (!patrn.exec(s)) return false;
  return true;
}

export default () => {
  const [username, SetUserName] = useState<string>();
  const [nickName, SetNickName] = useState<string>();
  const [password, SetPassWord] = useState<string>();
  const [confirm, SetConfirm] = useState<string>();
  const [flag, SetFlag] = useState<boolean>(false);

  const register = () => {
    if (!username) {
      Taro.atMessage({
        message: "请输入密码",
        type: "error"
      });
      return;
    }
    if (!nickName) {
      Taro.atMessage({
        message: "请输入昵称",
        type: "error"
      });
      return;
    }
    if (!password) {
      Taro.atMessage({
        message: "请输入密码",
        type: "error"
      });
      return;
    }
    if (!confirm) {
      Taro.atMessage({
        message: "请输入确认密码",
        type: "error"
      });
      return;
    }

    if (!isRegisterUserName(username)) {
      Taro.atMessage({
        message: "请输入5个字节以上的用户名",
        type: "error"
      });
      return;
    }

    if (!isPasswd(password)) {
      Taro.atMessage({
        message: "请输入输入6-20个字母、数字、下划线的密码",
        type: "error"
      });
      return;
    }

    if (password != confirm) {
      Taro.atMessage({
        message: "两次密码不一致",
        type: "error"
      });
      return;
    }

    const date = {
      username: username,
      password: password,
      nickName: nickName
    };

    Rl(date).then(resp => {
      Taro.atMessage({
        message: "注册成功",
        type: "success"
      });
      SetFlag(false);
    });
  };

  return (
    <View className="login_wrapper">
      <AtMessage />
      {/* 标题 */}
      <View className="login_title">
        <View className="login_title_one">登 陆 后 更 精 彩</View>
        <View className="login_title_two">
          A good seed will not sow,nor will it bear fruit.
        </View>
      </View>
      {/* 登录或注册表单 */}
      <View className="login_from">
        {flag ? (
          <View>
            <View className="login_input">
              <Input
                className="login_input_item"
                placeholder="请输入账号"
                placeholderStyle="color:white"
                onInput={e => {
                  SetUserName(e.detail.value);
                }}
              ></Input>
            </View>
            <View className="login_input">
              <Input
                className="login_input_item"
                placeholder="请输入用户昵称"
                placeholderStyle="color:white"
                onInput={e => {
                  SetNickName(e.detail.value);
                }}
              ></Input>
            </View>
            <View className="login_input">
              <Input
                type="safe-password"
                placeholder="请输入密码"
                placeholderStyle="color:white"
                onInput={e => {
                  SetPassWord(e.detail.value);
                }}
              ></Input>
            </View>
            <View className="login_input">
              <Input
                type="safe-password"
                placeholder="请再次确认密码"
                placeholderStyle="color:white"
                onInput={e => {
                  SetConfirm(e.detail.value);
                }}
              ></Input>
            </View>
          </View>
        ) : (
          <View>
            <View className="login_input">
              <Input
                className="login_input_item"
                placeholder="请输入账号"
                placeholderStyle="color:white"
                value={username}
                onInput={e => {
                  SetUserName(e.detail.value);
                }}
              ></Input>
            </View>
            <View className="login_input">
              <Input
                type="safe-password"
                placeholder="请输入密码"
                placeholderStyle="color:white"
                value={password}
                onInput={e => {
                  SetPassWord(e.detail.value);
                }}
              ></Input>
            </View>
          </View>
        )}

        <View className="login_register ">
          <View></View>
          {flag ? (
            <View
              onClick={() => {
                SetFlag(false);
              }}
              style={{
                marginRight: 10
              }}
            >
              已有账户，去登录
            </View>
          ) : (
            <View
              style={{
                marginRight: 10
              }}
              onClick={() => {
                SetFlag(true);
              }}
            >
              注册
            </View>
          )}
        </View>
      </View>

      {/* 登录 */}
      <View className="login_button">
        {flag ? (
          <Button
            onClick={() => {
              register();
            }}
          >
            注册
          </Button>
        ) : (
          <Button
            onClick={() => {
              if (!username) {
                Taro.atMessage({
                  message: "请输入密码",
                  type: "error"
                });
                return;
              }

              if (!password) {
                Taro.atMessage({
                  message: "请输入密码",
                  type: "error"
                });
                return;
              }

              if (!isRegisterUserName(username)) {
                Taro.atMessage({
                  message: "请输入5个字节以上的用户名",
                  type: "error"
                });
                return;
              }

              if (!isPasswd(password)) {
                Taro.atMessage({
                  message: "请输入6-20个字母、数字、下划线的密码",
                  type: "error"
                });
                return;
              }

              const data = {
                username: username,
                password: password
              };
              ll(data).then(resp => {
                Taro.atMessage({
                  message: "登录成功",
                  type: "success"
                });
                Taro.reLaunch({
                  url: "/pages/mine/index"
                });
                getUserInfo().then(resp => {
                  Taro.setStorageSync("userInfo", resp);
                });
                Taro.setStorageSync("tokenValue", resp);
              });
            }}
          >
            登录
          </Button>
        )}
      </View>
    </View>
  );
};
